<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>普通Marker</title>
  </head>
  <script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
  <style type="text/css">
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    #container {
      position: relative;
      width: 100%;
      height: 100%;
    }
    .btnContainer {
      position: absolute;
      left: 20px;
      top: 20px;
      z-index: 10000;
    }

    .btnContainer button {
      padding: 10px 14px;
      box-sizing: border-box;
      border: none;
      background-color: #3876ff;
      border-radius: 2px;
      color: #fff;
      font-size: 14px;
      line-height: 14px;
      margin-bottom: 10px;
    }
  </style>
  <body>
    <div class="btnContainer">
      <button class="btn1">marker增加高度</button>
      <button class="btn2">marker去除高度</button>
    </div>
    <div id="container"></div>
    <script type="text/javascript">
      var center = new TMap.LatLng(39.98210863924864, 116.31310899739151);
      var centerHeight = new TMap.LatLng(39.98210863924864, 116.31310899739151, 134);

      // 初始化地图
      var map = new TMap.Map('container', {
        zoom: 17, // 设置地图缩放
        center: new TMap.LatLng(39.98210863924864, 116.31310899739151), // 设置地图中心点坐标，
        pitch: 0, // 俯仰度
        rotation: 0, // 旋转角度
      });

      // MultiMarker文档地址：https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocMarker
      var marker = new TMap.MultiMarker({
        map: map,
        styles: {
          // 点标记样式
          marker: new TMap.MarkerStyle({
            width: 20, // 样式宽
            height: 30, // 样式高
            anchor: { x: 10, y: 30 }, // 描点位置
          }),
        },
        geometries: [
          // 点标记数据数组
          {
            // 标记位置(纬度，经度，高度)
            position: center,
            id: 'marker',
          },
        ],
      });
      document.querySelector('button.btn1').onclick = function () {
        var data = marker.getGeometryById('marker');
        Object.assign(data, {
          position: centerHeight,
        });
        marker.updateGeometries([data]);
        map.easeTo(
          {
            pitch: 80,
          },
          {
          	duration: 600,
          }
        );
      };
      document.querySelector('button.btn2').onclick = function () {
        var data = marker.getGeometryById('marker');
        Object.assign(data, {
          position: center,
        });
        marker.updateGeometries([data]);
      };
    </script>
  </body>
</html>
